<template>
  <view class="order-management flexc">
    <view class="search">
      <u-search
        borderColor="#F6F6F6"
        v-model="keyword"
        height="36"
        bgColor="#F6F6F6"
        :showAction="false"
        searchIconColor="#959595"
        :searchIconSize="20"
        placeholderColor="#959595"
        placeholder="搜索订单编号"
        @search="handleSearch"></u-search>
    </view>
    <view class="flex1 over">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="wrap">
          <view class="box" v-for="item in 10">
            <view class="order-no">订单号：111111111</view>
            <view class="flex">
              <image
                class="thumb"
                src="/static/demo.jpg"
                mode="aspectFit"></image>
              <view class="flex1">
                <view class="ellipsis-2 t">222222</view>
                <view class="p">
                  <text>￥</text>
                  99.00
                </view>
              </view>
            </view>

            <view class="f">
              <view class="">实付款： ￥1111</view>
              <view class="flex f-b">
                <view
                  class=""
                  @click="
                    toRoute({
                      path: '/management-detail',
                      query: {
                        type,
                      },
                    })
                  ">
                  订单详情
                </view>
                <template v-if="type == 1">
                  <view class="">
                    <view
                      class=""
                      @click="
                        toRoute({
                          path: '/management-detail',
                          query: {
                            type: 1,
                          },
                        })
                      ">
                      下载作品
                    </view>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 0, //0默认。1已购
    };
  },
  onLoad(options) {
    this.type = options?.type || 0;
    uni.setNavigationBarTitle({
      title: this.type == 1 ? "已购作品" : "订单管理",
    });
  },
};
</script>

<style lang="scss" scoped>
.order-management {
  width: 100%;
  height: 100%;
  background: #fff;
  .search {
    padding: 8upx 32upx;
  }
  .wrap {
    padding: 24upx 32upx;
    background: #f6f6f6;
    .box {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 34upx 24upx 40upx;
      margin-bottom: 24upx;
      .order-no {
        font-size: 24rpx;
        color: #999999;
        margin-bottom: 28upx;
      }
      .thumb {
        width: 168upx;
        height: 168upx;
        margin-right: 24upx;
      }
      .t {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 48upx;
      }
      .p {
        font-weight: bold;
        font-size: 32rpx;
        color: #e23410;
        & > text {
          font-weight: 400;
          font-size: 20rpx;
        }
      }
      .f {
        margin-top: 26upx;
        text-align: right;
        & > view:nth-of-type(1) {
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 34upx;
        }
        .f-b {
          justify-content: flex-end;
          & > view:nth-of-type(1) {
            width: 160rpx;
            height: 64rpx;
            background: #f6f6f6;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            text-align: center;
            line-height: 64upx;
            font-size: 24rpx;
            color: #333333;
            margin-left: auto;
          }
          & > view:nth-of-type(2) {
            width: 160rpx;
            height: 64rpx;
            background: #f49c0d;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 24rpx;
            color: #ffffff;
            text-align: center;
            line-height: 64upx;
            margin-left: 24upx;
          }
        }
      }
    }
  }
}
</style>
